<template>
  <div id="sample-manage">
    <el-card class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="basicData"
        class="demo-form-inline"
        label-width="120px"
        size="small"
      >
        <el-form-item label="所属区县:" prop="countyAndCitiesId" label-width="83px">
          <el-select size="mini" v-model="basicData.countyAndCitiesId" placeholder="选择">
            <el-option label="区县一" value="shanghai" />
            <el-option label="区县二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属医院:" prop="hospitalId">
          <el-select size="mini" v-model="basicData.hospitalId" placeholder="选择">
            <el-option label="医院一" value="shanghai" />
            <el-option label="医院二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门:" prop="deptId">
          <el-select size="mini" v-model="basicData.deptId" placeholder="选择">
            <el-option label="部门一" value="shanghai" />
            <el-option label="部门二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="母亲姓名:" prop="motherName" label-width="83px">
          <el-input size="mini" v-model="basicData.motherName" placeholder="输入" />
        </el-form-item>
        <el-form-item label="母亲身份证:" prop="motherIdCard">
          <el-input size="mini" v-model="basicData.motherIdCard" placeholder="输入" />
        </el-form-item>
        <el-form-item label="父亲身份证:" prop="fatherIdCard">
          <el-input size="mini" v-model="basicData.fatherIdCard" placeholder="输入" />
        </el-form-item>
        <el-form-item label="手机号码:" prop="tel">
          <el-input size="mini" v-model="basicData.tel" placeholder="输入" />
        </el-form-item>
        <el-form-item label="母亲户籍:" prop="census">
          <el-radio-group v-model="basicData.census">
            <el-radio label="本地">本地</el-radio>
            <el-radio label="外地">外地</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="住址:" prop="address" label-width="55px">
          <el-input size="mini" v-model="basicData.address" placeholder="输入" />
        </el-form-item>

        <el-form-item label="婴儿体重:" prop="weight" label-width="83px">
          <el-input size="mini" v-model="basicData.weight" placeholder="输入">
            <template slot="append">克</template>
          </el-input>
        </el-form-item>
        <el-form-item label="孕周:" prop="week">
          <el-input size="mini" v-model="basicData.week" placeholder="输入">
            <template slot="append">周</template>
          </el-input>
        </el-form-item>
        <el-form-item label="孕天:" prop="day">
          <el-input size="mini" v-model="basicData.day" placeholder="输入">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="出生日期:" prop="birthDate">
          <el-date-picker
            size="mini"
            v-model="basicData.birthDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="basicData.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="未知">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="户口类型:" prop="registeredId" label-width="83px">
          <el-radio-group v-model="basicData.registeredId">
            <el-radio label="农村">农村</el-radio>
            <el-radio label="城镇">城镇</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="采血编号:" prop="samplingNumber" label-width="83px">
          <el-input size="mini" v-model="basicData.samplingNumber" placeholder="输入" />
        </el-form-item>
        <el-form-item label="条形码号:" prop="barCode">
          <el-input size="mini" v-model="basicData.barCode" placeholder="输入" />
        </el-form-item>
        <el-form-item label="采血日期:" prop="samplingDate">
          <el-date-picker
            size="mini"
            v-model="basicData.samplingDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="样本质量:" prop="sampleQuality">
          <el-select size="mini" v-model="basicData.sampleQuality" placeholder="样本质量">
            <el-option label="合格" value="合格" />
            <el-option label="等级不合格" value="等级不合格" />
          </el-select>
        </el-form-item>
        <el-form-item label="采血人:" prop="samplingPeople">
          <el-input size="mini" v-model="basicData.samplingPeople" placeholder="输入" />
        </el-form-item>
        <el-row id="more-row">
          <el-col :span="24" class="more-col">
            <el-form-item label="筛查备注:" class="remark" prop="remark" label-width="83px">
              <el-input size="mini" v-model="basicData.remark" type="textarea" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col id="shiyan" :span="10" class="more-col">
            <el-form-item
              label="实验项目:"
              prop="projectIdList"
              class="projectIdList"
              label-width="83px"
            >
              <el-checkbox-group v-model="basicData.projectIdList">
                <el-checkbox label="PHE" name="type">PHE</el-checkbox>
                <el-checkbox label="TSH" name="type">TSH</el-checkbox>
                <el-checkbox label="17_a_0HP" name="type">17_a_0HP</el-checkbox>
                <el-checkbox label="G6PD" name="type">G6PD</el-checkbox>
                <el-checkbox label="MSMS" name="type">MSMS</el-checkbox>
                <el-checkbox label="地贫" name="type">地贫</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="费用类型:" prop="costType" label-width="83px">
          <el-radio-group v-model="basicData.costType">
            <el-radio label="自费">自费</el-radio>
            <el-radio label="免费">免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="送检医生:" prop="getExamineDoctor">
          <el-input size="mini" v-model="basicData.getExamineDoctor" placeholder="输入" />
        </el-form-item>
        <el-form-item label="实验编号:" prop="expNumber">
          <el-input size="mini" v-model="basicData.expNumber" placeholder="输入" />
        </el-form-item>
        <el-form-item label="免费券号:" prop="freeTicketNumber">
          <el-input size="mini" v-model="basicData.freeTicketNumber" placeholder="输入" />
        </el-form-item>
      </el-form>

      <div class="buttom">
        <el-button size="small" icon="el-icon-upload2" @click="onSubmit('reset')">导入</el-button>
        <el-button
          type="primary"
          size="small"
          style="width:120px"
          icon="el-icon-document-checked"
          @click="onSubmit('add')"
        >保存</el-button>
        <el-button size="small" @click="onSubmit('reset')">重置</el-button>
        <el-button size="small" icon="el-icon-printer" @click="onSubmit('addAndPrint')">保存并打印</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;">
      <el-table
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column prop="hospitalId" label="所属医院" />
        <el-table-column prop="motherName" label="母亲姓名" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="barCode" label="条形码号" />
        <el-table-column prop="birthDate" label="出生日期" />
        <el-table-column prop="projectIdList" label="检测项目" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog :visible.sync="dialogShow" width="40%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >采血卡打印</span>
      <el-form
        id="print"
        :inline="true"
        class="print-form"
        label-width="120px"
        label-position="left"
      >
        <div v-if="basicData.countyAndCitiesId" class="print-item">
          <span class="title">所属区县:</span>
          <span class="value">{{ basicData.countyAndCitiesId }}</span>
        </div>
        <div v-if="basicData.hospitalId" class="print-item">
          <span class="title">所属医院:</span>
          <span class="value">{{ basicData.hospitalId }}</span>
        </div>
        <div v-if="basicData.deptId" class="print-item">
          <span class="title">所属部门:</span>
          <span class="value">{{ basicData.deptId }}</span>
        </div>
        <div v-if="basicData.samplingNumber" class="print-item">
          <span class="title">采血编号:</span>
          <span class="value">{{ basicData.samplingNumber }}</span>
        </div>
        <div v-if="basicData.barCode" class="print-item">
          <span class="title">条形码号:</span>
          <span class="value">{{ basicData.barCode }}</span>
        </div>
        <div v-if="basicData.motherName" class="print-item">
          <span class="title">母亲姓名:</span>
          <span class="value">{{ basicData.motherName }}</span>
        </div>
        <div v-if="basicData.sex" class="print-item">
          <span class="title">性别:</span>
          <span class="value">{{ basicData.sex }}</span>
        </div>
        <div v-if="basicData.birthDate" class="print-item">
          <span class="title">出生日期:</span>
          <span class="value">{{ basicData.birthDate }}</span>
        </div>
        <div v-if="basicData.samplingDate" class="print-item">
          <span class="title">采血日期:</span>
          <span class="value">{{ basicData.samplingDate }}</span>
        </div>
        <div v-if="basicData.tel" class="print-item">
          <span class="title">手机号码:</span>
          <span class="value">{{ basicData.tel }}</span>
        </div>
        <div v-if="basicData.weight" class="print-item">
          <span class="title">婴儿体重:</span>
          <span class="value">{{ basicData.weight }}</span>
        </div>
        <div v-if="basicData.week" class="print-item">
          <span class="title">孕周:</span>
          <span class="value">{{ basicData.week }}</span>
        </div>
        <div v-if="basicData.day" class="print-item">
          <span class="title">孕天:</span>
          <span class="value">{{ basicData.day }}</span>
        </div>
        <div v-if="basicData.motherIdCard" class="print-item">
          <span class="title">母亲身份证:</span>
          <span class="value">{{ basicData.motherIdCard }}</span>
        </div>
        <div v-if="basicData.registeredId" class="print-item">
          <span class="title">户口类型:</span>
          <span class="value">{{ basicData.registeredId }}</span>
        </div>
        <div v-if="basicData.address" class="print-item">
          <span class="title">住址:</span>
          <span class="value">{{ basicData.address }}</span>
        </div>
        <div v-if="basicData.census" class="print-item">
          <span class="title">母亲户籍:</span>
          <span class="value">{{ basicData.census }}</span>
        </div>
        <div v-if="basicData.sampleQuality" class="print-item">
          <span class="title">样本质量:</span>
          <span class="value">{{ basicData.sampleQuality }}</span>
        </div>
        <div v-if="basicData.samplingPeople" class="print-item">
          <span class="title">采血人:</span>
          <span class="value">{{ basicData.samplingPeople }}</span>
        </div>
        <div v-if="basicData.remark" class="print-item">
          <span class="title">" pro</span>
          <span class="value">{{ basicData.remark }}</span>
        </div>
        <div v-if="basicData.projectIdList" class="print-item">
          <span class="title">实验项目:</span>
          <span class="value">{{ basicData.projectIdList }}</span>
        </div>
        <div v-if="basicData.costType.length > 0" class="print-item">
          <span class="title">费用类型:</span>
          <span class="value">{{ basicData.costType }}</span>
        </div>
        <div v-if="basicData.getExamineDoctor" class="print-item">
          <span class="title">送检医生:</span>
          <span class="value">{{ basicData.getExamineDoctor }}</span>
        </div>
        <div v-if="basicData.expNumber" class="print-item">
          <span class="title">实验编号:</span>
          <span class="value">{{ basicData.expNumber }}</span>
        </div>
        <div v-if="basicData.freeTicketNumber" class="print-item">
          <span class="title">免费券号:</span>
          <span class="value">{{ basicData.freeTicketNumber }}</span>
        </div>
        <div v-if="basicData.fatherIdCard" class="print-item">
          <span class="title">父亲身份证:</span>
          <span class="value">{{ basicData.fatherIdCard }}</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="clickTruePrint"
        >打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 打印对话框
      dialogShow: false,
      // 表格数据
      tableData: [],
      // 页条数
      pageSize: 10,
      // 页数
      pageIndex: 1,
      // 基本数据
      basicData: {
        // 所属区县
        countyAndCitiesId: "",
        // 所属医院
        hospitalId: "",
        // 所属部门
        deptId: "",
        // 采血编号
        samplingNumber: "",
        // 条形码号
        barCode: "",
        // 母亲姓名
        motherName: "",
        // 性别
        sex: "男",
        // 出生日期
        birthDate: "",
        // 采血日期
        samplingDate: "",
        // 手机号码
        tel: "",
        // 婴儿体重
        weight: "",
        // 孕周
        week: "",
        // 孕天
        day: "",
        // 母亲身份证
        motherIdCard: "",
        // 户口类型
        registeredId: "农村",
        // 住址
        address: "",
        // 母亲户籍
        census: "本地",
        // 样本质量
        sampleQuality: "",
        // 采血人
        samplingPeople: "",
        // remark
        remark: "",
        // 实验项目
        projectIdList: ["PHE", "TSH", "17_a_0HP", "G6PD", "MSMS"],
        // 送检医生
        getExamineDoctor: "",
        // 实验编号
        expNumber: "",
        // 费用类型
        costType: "自费",
        // 免费券号
        freeTicketNumber: "",
        // 父亲身份证
        fatherIdCard: ""
      },
      // 校验
      basicDataRules: {
        countyAndCitiesId: [
          { required: true, message: "请选择所属区县", trigger: "change" }
        ],
        hospitalId: [
          { required: true, message: "请选择所属医院", trigger: "change" }
        ],
        deptId: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        motherName: [
          { required: true, message: "请输入母亲姓名", trigger: "change" }
        ],
        tel: [{ required: true, message: "请输入手机号码", trigger: "change" }],
        weight: [{ required: true, message: "请输入体重", trigger: "change" }],
        week: [{ required: true, message: "请输入孕周", trigger: "change" }],
        day: [{ required: true, message: "请输入孕天", trigger: "change" }],
        birthDate: [
          { required: true, message: "请输入出生日期", trigger: "change" }
        ],
        samplingDate: [
          { required: true, message: "请输入采血日期", trigger: "change" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        barCode: [
          { required: true, message: "请输入条形码号", trigger: "change" }
        ],
        costType: [
          { required: true, message: "请选择费用类型", trigger: "change" }
        ]
      }
    };
  },
  created() {
    let types = ["baby_sex", "account_type"];
    this.getDicts({ types: types }).then(response => {
      console.log(response.data);
    });
  },
  methods: {
    // 三个按钮点击事件
    onSubmit(type) {
      if (type == "add") {
        // 保存
        // 如果为true则验证表单
        let p1 = new Promise((resolve, reject) => {
          this.$refs["basicForm"].validate(valid => {
            if (valid) resolve();
          });
        });
        // 利用Promise异步校验表单，同时通过则进行下一步操作
        Promise.all([p1]).then(() => {
          console.log("验证通过,提交表单");
          console.log(this.basicData);
        });
      } else if (type == "reset") {
        // 重置
        // 如果为true则清空表单
        this.$refs["basicForm"].resetFields();
      } else {
        // 打印并保存
        // 如果为true则验证表单
        let p1 = new Promise((resolve, reject) => {
          this.$refs["basicForm"].validate(valid => {
            if (valid) resolve();
          });
        });
        // 利用Promise异步校验表单，同时通过则进行下一步操作
        Promise.all([p1]).then(() => {
          // 打印
          this.dialogShow = true;
        });
      }
    },
    // 点击打印
    clickTruePrint() {
      this.handlePrintPrint();
    },
    // 打印事件
    handlePrintPrint() {
      if (this.upLoading) {
        this.$message({
          message: "数据加载中,请稍后...",
          type: "warning"
        });
      } else {
        this.CreateTablePage("print", "采血卡打印", "sampleManage");
      }
    },
    // 分页
    handleSizeChange: function(val) {
      this.pageSize = val;
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.pageIndex = currentPage;
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#sample-manage {
  overflow: auto;
  height: 100%;
  .el-table__header {
    th {
      border: none;
    }
    th:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    th:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .el-form-item {
    margin-bottom: 17px;
  }

  .mores {
    .flex;
    justify-content: flex-start;
    .more-title {
      font-size: 12px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      color: rgb(153, 153, 153);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
    }
  }
  #more-row {
    .remark {
      width: 100%;
      .el-form-item__content {
        width: 90%;
      }
    }
    #shiyan {
      .projectIdList {
        width: 100%;
        .el-form-item__content {
          width: 80%;
        }
      }
    }
  }
  .buttom {
    margin-top: 15px;
    width: 100%;
    .flex;
  }
  .print-dialog {
    .print-form {
      max-height: 500px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      flex-flow: wrap;
      .print-item {
        width: 50%;
        .flex;
        justify-content: flex-start;
        color: #222222;
        font-size: 15px;
        margin-top: 10px;
        .title {
          font-weight: bold;
          flex: 0.4;
        }
        .value {
          flex: 0.6;
          font-weight: bold;
          overflow-wrap: anywhere;
        }
      }
    }
    .el-dialog__footer {
      .flex;
    }
    .el-dialog__header {
      background: #2669f3;
    }
  }
}
</style>
